<template>
<el-dialog custom-class="add-job" append-to-body title="添加任务依赖" :visible.sync="data.show" width="60%">
    <el-form @submit.native.prevent class="add-job-form">
        <el-form-item style="height: 100%">
            <div class="add-job-form-leftmain">
                <el-input class="add-job-form-leftmain-search" placeholder="请输入任务名称" @keyup.enter.native="handleSearch(keyword)" v-model="keyword">
                    <i slot="prefix" class="iconfont icon-sousuo" v-preventReClick="2000" @click="handleSearch(keyword)"></i>
                </el-input>
                <i class="iconfont icon-shuaxin" @click="keyword=''"></i>
                <el-checkbox-group v-model="checkedJobList" @change="handleChecked">
                    <el-checkbox v-for="item in jobList" :label="item" :key="item">{{item}}</el-checkbox>
                </el-checkbox-group>
            </div>
            <el-table class="add-job-table" :data="dialogTableData">
                <el-table-column show-overflow-tooltip prop="scheduleName" label="任务名称">
                    <template slot="header">
                        <i class="iconfont icon-shanchu" @click="handleAllDel"></i>
                        <span>任务名称</span>
                    </template>
                    <template slot-scope="scope">
                        <i class="iconfont icon-shanchu" @click="handleDel(scope)"></i>
                        <span>{{ scope.row.scheduleName }}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="period" label="调度周期"></el-table-column>
                <el-table-column show-overflow-tooltip prop="schedulTimeStr" label="调度时刻"></el-table-column>
            </el-table>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="data.show=false">取 消</el-button>
        <el-button type="primary" @click="handleClickDefine">确 定</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {
    name: 'AddJob',
    props: {
        data: {
            required: true,
            type: Object
        }
    },
    data () {
        return {
            dialogTableData: [],
            jobList: [],
            checkedJobList: [],
            keyword: '',
            oldData: []
        }
    },
    watch: {
        keyword (val) {
            this.handleSearch(val)
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        init () {
            this.jobList = this.data.allData.map(v => v.scheduleName)
            this.oldData = this.jobList
            this.checkedJobList = this.data.selectData.map(v => v.scheduleName)
            this.handleChecked(this.checkedJobList)
        },
        handleClickDefine () {
            this.$emit('getJobList', this.dialogTableData)
            this.data.show = false
        },
        handleAllDel () {
            this.dialogTableData = []
            this.checkedJobList = []
        },
        handleDel (val) {
            this.dialogTableData.splice(val.$index, 1)
            this.checkedJobList.splice(val.$index, 1)
        },
        handleSearch (val) {
            if (val) {
                this.jobList = this.oldData.filter(item => {
                    return item.toString().includes(val)
                })
            } else {
                this.jobList = this.oldData
            }
        },
        handleChecked (arr) {
            this.dialogTableData = []
            for (let i = 0; i < arr.length; i++) {
                this.jobList.map((item, index) => {
                    if (arr[i] === item) {
                        this.dialogTableData.push(this.data.allData[index])
                    }
                })
            }
        }
    }
}
</script>

<style lang="less">
.add-job {
    .el-dialog__body {
        padding-bottom: 0;
    }
    .add-job-form {
        height: 500px;
        .el-form-item__content {
            height: 100%;
        }
        .add-job-form-leftmain {
            width: 30%;
            padding: 12px;
            border: 1px solid rgb(245,245,245);
            .add-job-form-leftmain-search {
                width: calc(100% - 28px) !important;
            }
            .icon-shuaxin {
                margin-left: 8px;
                cursor:pointer;
                color: #606266;
                &:hover {
                    color: #2680EB;
                }
            }
        }
        .el-checkbox-group {
            height: calc(100% - 36px);
            overflow: auto;
            display: flex;
            flex-direction: column;
        }
    }
    .icon-shanchu {
        margin-left: 5px;
        margin-right: 10px;
    }
    .add-job-table {
        border: 1px solid #EBEEF5;
        margin-left: 5px;
        .el-table__header tr th{
            padding: 0;
        }
        .el-table__body-wrapper {
            height: calc(100% - 50px;);
            overflow-x:hidden;
            overflow-y:auto;
        }
        tbody tr{
            &:last-child td {
                border-bottom: 0;
            }
        }
    }
}
</style>
